<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>首页</title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/iconfont.css">
		<style>
			.bar{
				/* background-color: #ccc; */
				background: linear-gradient(#ccc,#fff);
				box-shadow: none;
			}
			.type-area{
				padding:15px;
				background-color: #fff;
			}
			.type-select button{
				padding: 10px 0;
				border:none;
				background: linear-gradient( #fff,#9191ea);
			}
			.scroll{
				/*滚动后吸附到顶部*/
				width:100%;
				position: fixed;
				top:44px;
				z-index: 1;
			}
			.content-area{
				margin-bottom:48px;
			}
			.content-area img{
				width: 80px;
				height: 80px;
				margin-right:10px;
			}
			.content-area li{
				height:90px;
				padding: 8px;
			}
			.title{
				height:42px;
				overflow:hidden;
				text-overflow:ellipsis;
				display:-webkit-box; /* 将对象作为弹性伸缩盒子模型显示。 */
				-webkit-box-orient:vertical;/* 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式） */
				-webkit-line-clamp:2; /* 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。 */
			}
			.issueType{
				position: relative;
				bottom: -10px;
				color:#09a267;
			}
			.none{
				background-image:url(images/none.png);
				background-size:cover;
				height:250px;
				width:100%;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav bar" id="bar">
			<a class=" mui-icon mui-icon-loop" style="color: #fff;"></a>
			<input id="sosuoval" placeholder="输入关键字搜索" style="border:none;border-radius: 20px;height:32px;padding:10px;margin:0 10px;"/>
			<span id="sosuo" class="mui-icon mui-icon-search" style="color:#9161ff;"></span>
		</header>
		<div class="mui-content">
			<!-- 按类型检索模块 -->
			<div class="type-area">
				<ul class="mui-table-view mui-grid-view mui-grid-9">
					<li class="mui-table-view-cell mui-col-xs-4">
						<a href="#" onclick="SelectBytype(1)">
							<span class="mui-icon iconfont icon-zhongjinshu"></span>
							<div class="mui-media-body">金属制品</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-col-xs-4">
						<a href="#" onclick="SelectBytype(2)">
							<span class="mui-icon iconfont icon-zhizhang"></span>
							<div class="mui-media-body">纸制品</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-col-xs-4">
						<a href="#" onclick="SelectBytype(3)">
							<span class="mui-icon iconfont icon-dianzichanpin"></span>
							<div class="mui-media-body">电子产品</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-col-xs-4">
						<a href="#" onclick="SelectBytype(4)">
							<span class="mui-icon iconfont icon-suliaoping"></span>
							<div class="mui-media-body">塑胶制品</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-col-xs-4">
						<a href="#" onclick="SelectBytype(5)">
							<span class="mui-icon iconfont icon-mutouyuanmu"></span>
							<div class="mui-media-body">木制品</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-col-xs-4">
						<a href="#">
							<span class="mui-icon mui-icon-more"></span>
							<div class="mui-media-body">More</div>
						</a>
					</li>
				</ul> 
			</div>
			<div class="content">
				<!-- 按类别搜索 -->
				<div class="type-select">
					 <div class="mui-row">
						<button type="button" id="select-near" class="mui-btn mui-col-xs-6">离我最近</button>
						<button type="button" id="select-new" class="mui-btn mui-col-xs-6">最新发布</button>
					</div>
				</div>
				<!-- 内容区域 -->
				<div class="content-area"  id="content_area">
					<div class="mui-card">
						<ul class="mui-table-view" id="product_list">
						</ul>
					</div>
				</div>
			</div>
		</div>

		<script src="js/util.js"></script>
		<script src="jquery.mobile-1.4.5/jquery-1.8.3.min.js"></script>
		<script src="js/jquery.cookie.js"></script>
		<script src="js/conf.js"></script>
		<script src="js/index.js"></script>
		<script type="text/javascript">
			// 滚动监听--按类搜索.type-select到达顶部时固定位置
			$(window).scroll(function() {
				var bartop=$(".bar").offset().top;
				var contenttop=$(".content").offset().top;
				var distance  = contenttop-bartop;
				if(distance < 60 ) {
					$('.type-select').addClass("scroll");
				} else {
					$('.type-select').removeClass("scroll");
				}
			});
			(function() {
				$("body").height($(window).height());
				mui.init({
					// 预加载页面
					preloadPages:[{
						id:'product_detail',
						url:'html/product_detail.html'
					}]
				});				
				mui.plusReady(function() {
					var pdetailPage = null;
					mui('#product_list').on('tap',".product_li",function(e) {
						var id = this.getAttribute('id');
						if(!pdetailPage){
							pdetailPage = plus.webview.getWebviewById('product_detail');
						}
						//触发商品详情页面的pdetailId事件
						mui.fire(pdetailPage,'pdetailId',{
							id:id
						});
						mui.openWindow({
							id:"product_detail"
						});
					});
					
					var self = plus.webview.currentWebview(),
						leftPos = Math.ceil((window.innerWidth - 60) / 2); // 设置凸起大图标为水平居中
					/**	
					 * drawNativeIcon 绘制带边框的半圆，
					 * 实现原理：
					 *   id为bg的tag 创建带边框的圆
					 *   id为bg2的tag 创建白色矩形遮住圆下半部分，只显示凸起带边框部分
					 * 	 id为iconBg的红色背景图
					 *   id为icon的字体图标
					 *   注意创建先后顺序，创建越晚的层级越高
					 */
					var drawNativeIcon = util.drawNative('icon', {
						bottom: '5px',
						left: leftPos + 'px',
						width: '60px',
						height: '60px'
					}, [{//中间的凸起弧线
						tag: 'rect',
						id: 'bg',
						position: {
							top: '1px',
							left: '0px',
							width: '100%',
							height: '100%'
						},
						rectStyles: {
							color: '#fff',
							radius: '50%',
							borderColor: '#ccc',
							borderWidth: '1px'
						}
					}, {//中间的凸起弧线
						tag: 'rect',
						id: 'bg2',
						position: {
							bottom: '-0.5px',
							left: '0px',
							width: '100%',
							height: '45px'
						},
						rectStyles: {
							color: '#fff'
						}
					}, {//中间的凸起圆形图标
						tag: 'rect',
						id: 'iconBg',
						position: {
							top: '5px',
							left: '5px',
							width: '50px',
							height: '50px'
						},
						rectStyles: {
							color: '#dd524d',//图标底色(绿色2a9a00)
							radius: '50%'
						}
					}, {//中间的凸起圆形图标上的字符
						tag: 'font',
						id: 'icon',
						text: '+', //此为字体图标Unicode码'\e600'转换为'\ue600'
						position: {
							top: '0px',
							left: '5px',
							width: '50px',
							height: '100%'
						},
						textStyles: {
							fontSrc: '_www/fonts/iconfont.ttf',
							align: 'center',
							color: '#fff',
							size: '50px'
						}
					}]);
					// append 到父webview中
					self.append(drawNativeIcon);

					//自定义监听图标点击事件
					var active_color = '#fff';
					drawNativeIcon.addEventListener('click', function(e) {
						plus.webview.open('html/publish-type.html', 'new', {}, 'slide-in-bottom');
					});
					// 中间凸起图标绘制及监听点击完毕

					// 创建子webview窗口 并初始化
					var aniShow = {};
					util.initSubpage(aniShow);
					
					var nview = plus.nativeObj.View.getViewById('tabBar'),//底部导航条
						activePage = plus.webview.currentWebview(),
						targetPage,
						subpages = util.options.subpages,
						pageW = window.innerWidth,
						currIndex = 0;
					/**
					 * 点击输入框弹出软键盘时隐藏底部导航栏
					 * 1.获取原始窗口的高度
					 * 2.当浏览器被重置大小时执行Javascript代码:
					 * 3.软键盘弹起与隐藏  都会引起窗口的高度发生变化
					 */
// 					var originalHeight = document.documentElement.clientHeight || document.body.clientHeight;
// 					window.onresize = function () {
// 						var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
// 						// alert(originalHeight+"---"+resizeHeight);
// 						if(resizeHeight * 1 < originalHeight * 1) {
// 							// nview.hide();
// 						}else{
// 						}
// 					}
					
					/**
					 * 根据判断view控件点击位置判断切换的tab
					 */
					nview.addEventListener('click', function(e) {
						var clientX = e.clientX;
						if(clientX > 0 && clientX <= parseInt(pageW * 0.25)) {
							currIndex = 0;
						} else if(clientX > parseInt(pageW * 0.25) && clientX <= parseInt(pageW * 0.45)) {
							currIndex = 1;
						} else if(clientX > parseInt(pageW * 0.45) && clientX <= parseInt(pageW * 0.8)) {
							currIndex = 2;
						} else {
							currIndex = 3;
						}
						// 匹配对应tab窗口	
						if(currIndex > 0) {
							targetPage = plus.webview.getWebviewById(subpages[currIndex - 1]);
						} else {
							targetPage = plus.webview.currentWebview();
						}

						if(targetPage == activePage) {
							return;
						}
						
						if(currIndex !== 2 && currIndex !== 3) { 
							//底部选项卡切换
							util.toggleNview(currIndex);
							// 子页面切换
							util.changeSubpage(targetPage, activePage, aniShow);
							//更新当前活跃的页面
							activePage = targetPage;
						} else if(currIndex == 2){
							var id = plus.navigator.getCookie( "id");
							if(typeof(id) != "string"){
								plus.webview.open('html/before-login.html', 'new', {}, 'slide-in-right', 200);
							}else{
								util.toggleNview(currIndex);
							}
						}else{
							/**
							 * 第四个tab 打开新窗口
							 * 判断用户是否登录
							 * 	已登录进入个人中心；
							 * 	未登录进入登陆页面。
							 */
							var loginNumber = plus.navigator.getCookie( "loginNumber");
							var id = plus.navigator.getCookie( "id");
							// alert(id+typeof(id));
							//id类型为undefined表示未定义，为object表示id已被删除
							//id为string类型,表示id存在
							if(typeof(id) == "string"){
								plus.webview.open('html/center.html', 'new', {}, 'slide-in-right', 200);
							}else{
								plus.webview.open('html/before-login.html', 'new', {}, 'slide-in-right', 200);
							}
						}
					});
				});
			})();
		</script>
	</body>
</html>